<template>
  <view class="container">
    <!-- 判断用户是否登录 -->
    <view v-if="isLogin">
      <view v-if="outList.length > 0">
        <!-- 使用 v-for 渲染出库记录列表 -->
        <view class="out-record" v-for="(item, index) in outList" :key="index">
			<view class="img-container">
			  <image :src="item.imgUrl" class="product-img" v-if="item.imgUrl" />
			</view>
          <view class="record-item">
            <!-- 右侧为产品信息 -->
            <view class="text-container">
              <text class="info-content">出库时间:{{ item.outTime }}</text>
              <text class="info-content">防伪编码:{{ item.flowCode }}</text>
              <text class="info-content">产品信息:{{ item.productName }} - {{ item.specifications }}</text>
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <text class="empty-message">暂无出库记录</text>
      </view>
    </view>
    <view v-else>
      <text class="login-prompt">请先登录。</text>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from "vuex";
  import { getScanCodeOutList } from '@/api/common.js';

  export default {
    data() {
      return {
        outList: [], // 用于保存出库记录的数组
      };
    },
    computed: mapGetters(['isLogin', 'uid']),
    mounted() {
      if (this.isLogin) {
        this.fetchOutboundRecords();
      }
    },
    methods: {
      // 获取出库记录
      fetchOutboundRecords() {
        getScanCodeOutList({ userId: this.uid })
          .then(res => {
            if (res.value) {
              this.outList = res.value;
            } else {
              this.outList = [];
            }
          })
          .catch(error => {
            console.error("获取出库记录失败", error);
            this.outList = [];
          });
      },
    },
  };
</script>

<style scoped>
  .container {
    padding: 20px;
    background-color: #f9f9f9;
  }

  /* .out-record 是主要的布局容器 */
  .out-record {
    display: flex;
    flex-direction: row;  /* 确保图片和文字在同一行 */
    align-items: center;  /* 垂直居中 */
    margin-bottom: 15px;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* 添加阴影 */
  }

  /* .img-container 控制图片的容器 */
  .img-container {
    flex-shrink: 0;  /* 防止图片被压缩 */
    margin-right: 15px;  /* 给图片和文字之间添加间隔 */
  }

  /* 控制图片大小 */
  .product-img {
    width: 80px;
    height: 80px;
    object-fit: cover;  /* 保证图片不变形 */
    border-radius: 8px;  /* 圆角效果 */
  }

  /* 右侧文字容器 */
  .text-container {
    flex-grow: 1;  /* 让文字区域占据剩余空间 */
    display: flex;
    flex-direction: column; /* 垂直排列文字内容 */
  }

  /* 每条记录的文字内容 */
  .record-item {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
  }

  .info-title {
    font-weight: bold;
    font-size: 14px;
    color: #666;
  }

  .info-content {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    word-wrap: break-word;  /* 强制换行 */
    white-space: normal;    /* 确保文本在宽度限制下换行 */
  }

  .empty-message,
  .login-prompt {
    text-align: center;
    font-size: 16px;
    color: #999;
  }

  /* 为空时的信息 */
  .empty-message {
    margin-top: 20px;
  }

  /* 登录提示 */
  .login-prompt {
    margin-top: 20px;
  }
</style>

